require('./PageHome.styl');

const reactMixin = require('react-mixin');

const { SearchBar,Toast, Button,Avatar,Context,Boxs,Grid,Icon} = SaltUI;
let HBox = Boxs.HBox;
let Box = Boxs.Box;
Context.setGlobal({avatar:{colors:['red', 'dark', 'red', 'red', 'red']}});
// let global = Context.getGlobal('avatar');
// global.colors =  ['green', 'grey', 'orange', 'blue', 'red'];
class PageHome extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
        };
    }

   handleClick = (options)=>{ 
     
       
       Toast.show(options);
    }


    handleLink(options) {
        console.log("options="+options);
        //url的#跳转
        location.hash = options;
    }
    
    handlePush() {
        //创建新的webview
        salt.router.push({
            id: 'popwin',
            url: './popwin.html',
            anim: 2,
            needPost: true,
            param: { foo: 1,
                bar: 2}   
        }).then().catch((e) => {
            if (e.errorCode === 1001) {
                location.href = './popwin.html';
            }
        });
    }

    render() {
        let t = this;
        return (
           //在jsx的onclick回调中，绑定this
            <div>
                 <div className="t-CL">
                     <Button className="t-FL" type="text" onClick={t.handleClick} style={{width:'40px'}}>设置</Button>
                     <Button className="t-FR" type="text" onClick={t.handleClick.bind(t,{type:'errorCode',content:'2'})} style={{width:'40px'}}>退出</Button>
                </div>
                 <div className="t-FBV t-FAC"><div style={{margin:'0 auto'}}><Avatar  size="60" name="头像"/></div></div>
                <div className="t-FBV t-FAC">                                   
                    <div className="t-MT6  ">姓名：<span >张铁牛</span></div>
                    <div className="t-MT6 ">工号：<span >8877</span></div>
                    <div className="t-MT6 ">职位：<span >产品策划</span></div>
                </div>
                <div className="t-MT16" style={{border:'1px solid grey'}}>
                    <SearchBar placeholder='输入关键字查询'  onSearch={(value)=>{}}/>
                </div>
                <div >
                    <HBox>
                        <Box flex={1} className="button-border t-FAC" >
                            <span >加班累计结余x小时</span>
                        </Box>
                        <Box flex={1} className="button-border t-FAC">
                            <span>本月加班结余x小时</span>
                        </Box>                       
                    </HBox>
                    <HBox>
                        <Box flex={1} className="button-border t-FAC">
                            <div>本月出勤异常x次</div>
                        </Box>
                        <Box flex={1} className="button-border t-FAC">
                            <span>本月钉钉异常x次</span>
                        </Box>
                    </HBox>
                </div>
                <div className="t-BT1 t-MT16 t-FAC t-PT30">
                       <span className="">常用系统</span>
                </div>
                <div className="t-MT30">
                   <Grid col={3} className="" square={true} touchable={true}>
                       <div className="t-FAC" >
                           <Icon name="user" fill={'42A5F5'}/>
                           <div className="menu-title t-MT10">个人中心</div>
                       </div>
                       <div className="t-FAC" onClick={t.handleLink.bind(t,'check')}>
                           <Icon name="time" fill={'#FF8A65'}/>
                           <div className="menu-title t-MT10">考勤系统</div>
                       </div>
                       <div className="t-FAC" onClick={t.handleLink.bind(t,'integration')}>
                           <Icon name="star" fill={'#EA80FC'}/>
                           <div className="menu-title t-MT10">积分系统</div>
                       </div>
                       <div className="t-FAC" onClick={t.handleLink.bind(t,'test')}>
                           <Icon name="info-circle" fill={'#EF9A9A'}/>
                           <div className="menu-title t-MT10">工作成果</div>
                       </div>
                       <div className="t-FAC">
                           <Icon name="check" fill={'#80DEEA'}/>
                           <div className="menu-title t-MT10">流程审批</div>
                       </div>
                       <div className="t-FAC">
                           <Icon name="pen" fill={'#BDBDBD'}/>
                           <div className="menu-title t-MT10">文档中心</div>
                       </div>
                   </Grid>
                </div>

            </div>
        );
    }
}

module.exports = PageHome;
